<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>医疗预约系统</title>
		<link rel="stylesheet"  href="/css/hospital.css" />
		<script src="/js/jquery-1.8.3.js"></script>
	</head>
	<body>
		
		<div class="bigbox">
			<div id="contes1">
				<h1>请填写修改信息</h1>
				<label>
					<span>选择科室：</span>
					<select id="keshi" onchange="selectdoctor(this)">
						<option>--选择科室--</option>
						<option>内科</option>
						<option>骨科</option>
						<option>外科</option>
						<option>妇科</option>
					</select>
				</label>
				<label>
					<span>选择医生：</span>
					<select id="doctorxg">
						<option>--选择医生--</option>
					</select>
				</label>



				<input type="button" style="margin-left: 110px" value="提交" id="doRegister">
				<input type="button"  value="取消" id="quxiao">


			</div>
			<div id="all_light"></div>
			<h1 style="text-align: center;padding-top: 50px;font-size: 80px;">医疗预约系统</h1>
				<table class="zhutable">
					<tr>
						<td id="yyjz"><img src="/img/yyjz.png" ></td>
						<td><img src="/img/pdcx.png" ></td>
						<td><img src="/img/bgcx.png" ></td>
					</tr>
					<tr>
						<td><a href="/hp/hisUser/doFindDepartment">预约就诊</a></td>
						<td><a href="/hp/hisUser/doregister">排队查询</a></td>
						<td><a href="/hp/hisUser/doregister">报告查询</a></td>
					</tr>
			</table>

			<div id="doctor1" th:each="first:${registersTable}"  >
				<h3>[[${first.doctorName}]]([[${first.departmentName}]])</h3>
				<h4>&emsp;&emsp;&emsp; 就诊人：[[${first.patientName}]]</h4>
				<h4>&emsp;&emsp;&emsp; 就诊时间：[[${first.appointmentTime}]]</h4>
				<button id="xgsj">修改时间</button>
				<button id="qxyy">取消预约</button>
			</div>
			<div class="minbanner"><img src="/img/tssq.png" ></div>
		
			
			<div class="rmks">
			<table>
				<h1>热门科室</h1>
					<tr>
						<td><img src="/img/hxnk.png"></td>
						<td><img src="/img/gk.png"></td>
						<td><img src="/img/ek.png"></td>
						<td><img src="/img/sjnk.png"></td>
						</tr>	
					<tr>
						<td><img src="/img/wk.png"></td>
						<td><img src="/img/fk.png"></td>
						<td><img src="/img/zhk.png"></td>
						</tr>
				
				</table>
				</div>
		<footer>
			
			<a href="#" >首页</a>
			<a href="#">我的</a>
			
		</footer>
		</div>

	</body>
	<script>
		var data = {
			"内科": ["石延科","缪灿铭","李雪山"],
			"骨科": ["陈世忠","苏永康","凌宇"],
			"外科": ["伊严","李韬","黎伟文"],
			"妇科": ["钟伟兰","冷观群"]
		}
		/*  实现二级联动下拉框 */
		function selectdoctor(thisobj){
			var prov = thisobj.value;
			var arrDoctor = data[prov];
			var oDoctor = document.getElementById("doctorxg");
			var opts = oDoctor.getElementsByTagName("option");
			var len = opts.length;
			for(var i=0; i<len-1; i++){
				oDoctor.removeChild(opts[1]);
			}
			for(var i = 0; i<arrDoctor.length; i++){
				var oOpt = document.createElement("option");
				oOpt.innerHTML = arrDoctor[i];
				oDoctor.appendChild(oOpt);
			}
		}
		$("#yyjz").click(function () {
			window.location.href="/hp/hisUser/doFindDepartment";
		})

		$("#xgsj").click(function () {
			document.getElementById('contes1').style.display = 'block';
			document.getElementById('all_light').style.display = 'block';

		})


		$("#qxyy").click(function () {
			document.getElementById('doctor1').style.display = 'none';
		})
		$("#quxiao").click(function () {
			document.getElementById('contes1').style.display = 'none';
			document.getElementById('all_light').style.display = 'none';
		})
		$("#doRegister").click(function () {

			alert("修改成功")
			document.getElementById('contes1').style.display = 'none';
			document.getElementById('all_light').style.display = 'none';
		})
	</script>
</html>
